<!-- Search -->
<div class="search-page">
    <div class="search-icon-close-container">
    <span class="search-icon-close">
      <i class="fa fa-chevron-down"></i>
    </span>
    </div>
    <div class="search-main container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!--<form>-->
                <input type="text" id="search-input" placeholder="$ grep...">
                <!--</form>-->
                <div id="search-results" class="mini-post-list"></div>
            </div>
        </div>
    </div>
</div>

<!-- Simple Jekyll Search -->
<script>
    // https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript
    function htmlDecode(input) {
        var e = document.createElement('textarea');
        e.innerHTML = input;
        // handle case of empty input
        return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }

    SimpleJekyllSearch({
        searchInput: document.getElementById('search-input'),
        resultsContainer: document.getElementById('search-results'),
        json: '/search.json',
        searchResultTemplate: '<div class="post-preview item"><a href="{url}"><h2 class="post-title">{title}</h2><h3 class="post-subtitle">{subtitle}</h3><hr></a></div>',
        noResultsText: 'No results',
        limit: 50,
        fuzzy: false,
        // a hack to get escaped subtitle unescaped. for some reason,
        // post.subtitle w/o escape filter nuke entire search.
        templateMiddleware: function (prop, value, template) {
            if (prop === 'subtitle' || prop === 'title') {
                if (value.indexOf("code")) {
                    return htmlDecode(value);
                } else {
                    return value;
                }
            }
        }
    });
</script>